import { defineComponent } from 'vue';
import { loginAction } from './loginAction';
import BackgroundParticles from '@/components/BackgroundParticles/index.vue';

export default defineComponent({
  components: { BackgroundParticles },

  setup() {
    const { goLogin, inputChange, formSubmit, userCount } = loginAction();

    return () => (
      <div class="my-demo-login">
        <Background-Particles />
        <div class="container">
          <h1>{/* <img src={loginLogo.value} /> */}233</h1>
          <label class="container-tip">请登录</label>
          <form onSubmit={formSubmit} class="login-form-validator">
            <div class="form-control" title="请输入账号">
              <input
                onInput={(e) => inputChange(e, 'account')}
                value={userCount.account}
                type="text"
                required
                autofocus
                id="login-account"
              />
              <label>请输入账号</label>
            </div>

            <div class="form-control" title="请输入密码">
              <input
                onInput={(e) => inputChange(e, 'password')}
                value={userCount.password}
                type="password"
                required
              />
              <label>请输入密码</label>
            </div>

            <button class="btn ripple" onClick={goLogin}>
              登录
            </button>

            <p class="text" />
          </form>
        </div>
      </div>
    );
  },
});
